<template>
  <div class="menu_comp">
    <div class="close" @click="mainStoreIns.changeMenuStatus()">
      {{ $t('message.close') }} X
    </div>
    <ul class="menus">
      <li
        class="menu_item"
        @click="clickMenu(item)"
        :class="{
          menu_active: getActive(item),
        }"
        v-for="item in list"
        :key="item.id"
      >
        {{ item.label }}
        <check-circle-two-tone
          v-show="getActive(item)"
          class="check_icon"
          two-tone-color="#49c5b6"
          :style="{
            fontSize: '26px',
          }"
        />
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { mainStore } from '@/stores/main';
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { CheckCircleTwoTone } from '@ant-design/icons-vue';
import { lang, menu } from './config';
const mainStoreIns = mainStore();

interface MenuProps {
  type?: string;
}
interface Item {
  id: number;
  label: string;
  value: string;
}

const router = useRouter();
const route = useRoute();

const prop = withDefaults(defineProps<MenuProps>(), {
  type: 'lang',
});
const list = computed(() => (prop.type === 'lang' ? lang : menu));

const clickMenu = (item: Item) => {
  if (prop.type === 'lang') {
    mainStoreIns.changeLanguage(item.value);
  } else if (route.path !== item.value) {
    mainStoreIns.changeMenuStatus(false);
    router.push(item.value);
  }
};

const getActive = (item: Item) => {
  if (prop.type === 'lang') {
    return mainStoreIns.language == item.value;
  }
  return route.path === item.value;
};
</script>

<style lang="scss" scoped>
.menu_comp {
  background-color: #f4f7f6;
  position: absolute;
  width: 300px;
  top: 0;
  left: 0;
  transition: all 0.3s;
  transform: translateX(-300px);
  height: 100%;
  .close {
    position: absolute;
    top: 20px;
    right: 15px;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    color: $second-color;
  }
  .menus {
    padding-top: 80px;
    font-size: 20px;
    line-height: 2;
    font-weight: bold;
    .menu_active {
      background-color: #fff;
    }
    .menu_item {
      height: 80px;
      line-height: 80px;
      cursor: pointer;
      padding: 0 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:hover:not(.menu_active) {
        background-color: #fff;
      }
    }
  }
}
</style>
